<%--
  Created by IntelliJ IDEA.
  User: 97990
  Date: 2022/7/12
  Time: 13:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/common/head.jsp"></jsp:include>
    <title>地区管理</title>
</head>
<body>
<jsp:include page="/common/nav.jsp"></jsp:include>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-warning">
                <div class="panel-heading">
                    地区展示
                    <button type="button" class="btn btn-sm btn-success" onclick="addArea();">
                        <span class="glyphicon glyphicon-plus"></span> 增加
                    </button>
                    <button type="button" class="btn btn-sm btn-warning" onclick="updateArea();">
                        <span class="glyphicon glyphicon-pencil"></span> 修改
                    </button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="deleteArea();">
                        <span class="glyphicon glyphicon-trash"></span> 删除
                    </button>
                </div>

                <div class="panel-body">
                    <ul id="areaTree" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<%--新增弹框--%>
<div id="addDiv" style="display: none">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">地区名称:</label>
            <div class="col-sm-8">
                <input type="text" id="add_areaName" class="form-control"  placeholder="请输入地区名称">
            </div>
        </div>
    </form>
</div>

<%--修改弹框--%>
<div id="updateDiv" style="display: none">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">地区名称:</label>
            <div class="col-sm-8">
                <input type="text" id="update_areaName" class="form-control"  placeholder="请输入地区名称">
            </div>
        </div>
    </form>
</div>


<jsp:include page="/common/script.jsp"></jsp:include>
<script>
    $(function (){
        areaList();
    })

    //权限树展示
    function areaList(){
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        $.ajax({
            type:"post",
            url:"/area/list.do",
            success:function (res){
                var v_data = res.data;
                $.fn.zTree.init($("#areaTree"), setting, v_data);
            }
        })
    }

    //新增
    var addAlert;
    function addArea(){
        //备份
        var v_html = $("#addDiv").html();
        //获取权限树
        var treeObj = $.fn.zTree.getZTreeObj("areaTree");
        //获取被选中的节点的集合
        var nodes = treeObj.getSelectedNodes();
        var selectNode = nodes[0];
        if (nodes.length == 1){
            //弹框
            addAlert = bootbox.dialog({
                title:"<b>新增地区</b>",
                message:$("#addDiv form"),//另一种方式.children()
                size:"normal",
                buttons: {
                    confirm: {
                        label: '<span class="glyphicon glyphicon-ok"></span>确定',
                        className: 'btn-info',
                        callback:function (result){
                            var v_param = {};
                            v_param.areaName = $("#add_areaName", addAlert).val();
                            v_param.fatherId = selectNode.id;
                            $.ajax({
                                type:"post",
                                url:"/area/add.do",
                                data:v_param,
                                success:function (res){
                                    if (res.code == 200){
                                        var newNode = res.data;
                                        treeObj.addNodes(selectNode, newNode);
                                    }
                                }
                            })
                        },
                    },
                    cancel: {
                        label: '<span class="glyphicon glyphicon-remove"></span>取消',
                        className: 'btn-danger'
                    }
                },
            })
        }else {
            bootbox.alert({
                message: "<span class='glyphicon glyphicon-exclamation-sign'></span>有且并只能选中一项",
                size: 'small',
                title: "提示信息"
            });
        }

        //还原
        $("#addDiv").html(v_html);
    }

    //删除
    function deleteArea(){
        //获取权限树
        var treeObj = $.fn.zTree.getZTreeObj("areaTree");
        //获取被选中的节点的集合
        var nodes = treeObj.getSelectedNodes();
        //获取被选中的节点 以及其下的所有子节点
        var nodeArr = treeObj.transformToArray(nodes);
        var idArr = [];
        for (var i = 0; i < nodeArr.length; i++) {
            idArr.push(nodeArr[i].id);
        }
        bootbox.confirm({
            size:"small",
            titile:"提示框",
            message:"确认删除吗？",
            buttons: {
                confirm: {
                    label: '<span class="glyphicon glyphicon-ok"></span>确定',
                    className: 'btn-success',

                },
                cancel: {
                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                    className: 'btn-danger'
                }
            },
            callback:function (result){
                if (result){
                    $.ajax({
                        type:"post",
                        url:"/area/deleteBatch.do",
                        data:{"ids":idArr.join(",")},
                        success:function (result){
                            if (result.code == 200){
                                for (var i = 0; i < nodeArr.length; i++) {
                                    treeObj.removeNode(nodeArr[i]);
                                }
                            }
                        }
                    })
                }
            }

        })
    }

    //修改
    var updateAlert;
    function updateArea(){
        //备份
        var v_html = $("#updateDiv").html();

        //获取权限树
        var treeObj = $.fn.zTree.getZTreeObj("areaTree");
        //获取被选中的节点的集合
        var nodes = treeObj.getSelectedNodes();
        var selectNode = nodes[0];
        if (nodes.length == 1){
            //回填
            $.ajax({
                type:"post",
                url:"/area/findArea.do",
                data:{"id":selectNode.id},
                success:function (res){
                    if (res.code == 200){
                        $("#update_areaName").val(res.data.areaName);
                            //弹框
                            updateAlert = bootbox.dialog({
                                title:"<b>更新地区</b>",
                                message:$("#updateDiv form"),//另一种方式.children()
                                size:"normal",
                                buttons: {
                                    confirm: {
                                        label: '<span class="glyphicon glyphicon-ok"></span>确定',
                                        className: 'btn-info',
                                        callback:function (result){
                                            var v_param = {}
                                            v_param.id = selectNode.id
                                            v_param.areaName = $("#update_areaName", updateAlert).val();
                                            $.ajax({
                                                type:"post",
                                                url:"/area/update.do",
                                                data:v_param,
                                                success:function (res){
                                                    selectNode.name = $("#update_areaName", updateAlert).val();
                                                    treeObj.updateNode(selectNode);
                                                }
                                            })
                                        },
                                    },
                                    cancel: {
                                        label: '<span class="glyphicon glyphicon-remove"></span>取消',
                                        className: 'btn-danger'
                                    }
                                },
                            })
                        }
                    //还原
                    $("#updateDiv").html(v_html);
                }
            })
        }else {
            bootbox.alert({
                message: "<span class='glyphicon glyphicon-exclamation-sign'></span>有且并只能选中一项",
                size: 'small',
                title: "提示信息"
            });
        }

    }

</script>
</body>
</html>
